<div class="container">
    <div class="block-header">
        <h2>Flot Charts <small>Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.</small></h2>

        <ul class="actions">
            <li>
                <a href="default.htm">
                    <i class="zmdi zmdi-trending-up"></i>
                </a>
            </li>
            <li>
                <a href="default.htm">
                    <i class="zmdi zmdi-check-all"></i>
                </a>
            </li>
            <li class="dropdown" uib-dropdown>
                <a href="default.htm" uib-dropdown-toggle>
                    <i class="zmdi zmdi-more-vert"></i>
                </a>

                <ul class="dropdown-menu dropdown-menu-right">
                    <li>
                        <a href="default.htm">Refresh</a>
                    </li>
                    <li>
                        <a href="default.htm">Manage Widgets</a>
                    </li>
                    <li>
                        <a href="default.htm">Widgets Settings</a>
                    </li>
                </ul>
            </li>
        </ul>

    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h2>Line Chart with curved edges <small>Curved edges made possible using curvedLines Flot plugin.</small></h2>

                    <ul class="actions">
                        <li class="dropdown action-show" uib-dropdown>
                            <a href="default.htm" uib-dropdown-toggle>
                                <i class="zmdi zmdi-more-vert"></i>
                            </a>

                            <div class="dropdown-menu pull-right">
                                <p class="p-20">
                                    You can put anything here
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="card-body">
                    <div class="chart-edge">
                        <div class="flot-chart" data-curvedline-chart></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h2>Lines Chart <small>Same above example without curved edges.</small></h2>

                    <ul class="actions">
                        <li class="dropdown action-show" uib-dropdown>
                            <a href="default.htm" uib-dropdown-toggle>
                                <i class="zmdi zmdi-more-vert"></i>
                            </a>

                            <div class="dropdown-menu pull-right">
                                <p class="p-20">
                                    You can put anything here
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="card-body">
                    <div class="chart-edge">
                        <div id="line-chart" data-line-chart class="flot-chart"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h2>Bar Chart</h2>

                    <ul class="actions">
                        <li class="dropdown action-show" uib-dropdown>
                            <a href="default.htm" uib-dropdown-toggle>
                                <i class="zmdi zmdi-more-vert"></i>
                            </a>

                            <div class="dropdown-menu pull-right">
                                <p class="p-20">
                                    You can put anything here
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="card-body card-padding-sm">
                    <div class="flot-chart" data-bar-chart></div>
                    <div class="flc-bar"></div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h2>Dynamic Chart</h2>

                    <ul class="actions">
                        <li class="dropdown action-show" uib-dropdown>
                            <a href="default.htm" uib-dropdown-toggle>
                                <i class="zmdi zmdi-more-vert"></i>
                            </a>

                            <div class="dropdown-menu pull-right">
                                <p class="p-20">
                                    You can put anything here
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="card-body card-padding-sm">
                    <div class="flot-chart" data-dynamic-chart></div>
                    <div class="flc-dynamic"></div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h2>Pie Chart</h2>

                    <ul class="actions">
                        <li class="dropdown action-show" uib-dropdown>
                            <a href="default.htm" uib-dropdown-toggle>
                                <i class="zmdi zmdi-more-vert"></i>
                            </a>

                            <div class="dropdown-menu pull-right">
                                <p class="p-20">
                                    You can put anything here
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="card-body card-padding">
                    <div id="pie-chart" class="flot-chart-pie" data-pie-donut></div>
                    <div class="flc-pie hidden-xs"></div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h2>Donut Chart</h2>

                    <ul class="actions">
                        <li class="dropdown action-show" uib-dropdown>
                            <a href="default.htm" uib-dropdown-toggle>
                                <i class="zmdi zmdi-more-vert"></i>
                            </a>

                            <div class="dropdown-menu pull-right">
                                <p class="p-20">
                                    You can put anything here
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="card-body card-padding">
                    <div id="donut-chart" class="flot-chart-pie" data-pie-donut></div>
                    <div class="flc-donut hidden-xs"></div>
                </div>
            </div>
        </div>
    </div>

</div>
